<template>
  <div 
    :class="[
      'cursor-pointer hover:bg-gray-50 p-4 border-b border-gray-100',
      active ? 'bg-blue-50' : ''
    ]"
    @click="$emit('click')"
  >
    <div class="flex">
      <div class="w-10 h-10 rounded-full overflow-hidden mr-3 flex-shrink-0">
        <img :src="avatarUrl" :alt="displayName" class="w-full h-full object-cover">
      </div>
      <div class="flex-1">
        <div class="flex justify-between">
          <div class="font-medium">{{ displayName }}</div>
          <div class="text-xs text-gray-400">{{ conversation.lastMessage.timestamp }}</div>
        </div>
        <div class="flex justify-between mt-1">
          <div class="text-xs text-gray-500">{{ companyInfo }}</div>
          <div v-if="conversation.unreadCount > 0" class="bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
            {{ conversation.unreadCount }}
          </div>
        </div>
        <div class="text-xs text-gray-400 mt-1">{{ conversation.lastMessage.content }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { Conversation } from '../types'

interface Props {
  conversation: Conversation
  active?: boolean
}

const props = defineProps<Props>()
defineEmits<{
  click: []
}>()

// Mock data for display
const displayName = computed(() => {
  if (props.conversation.lastMessage.type === 'system') {
    return '心仪牛人不回应?'
  }
  return '赵菲菲'
})

const companyInfo = computed(() => {
  if (props.conversation.lastMessage.type === 'system') {
    return ''
  }
  return '美奥集团 人力资源管理'
})

const avatarUrl = computed(() => '/placeholder.svg?height=100&width=100')
</script>
